<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">高度设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['areaHeight']"
        />
      </el-form-item>

      <el-form-item label="内边距(上下)">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['padding']['topBottom']"
        />
      </el-form-item>
      <el-form-item label="内边距(左右)">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo['padding']['rightLeft']"
        />
      </el-form-item>

      <template v-if="optionsInfo['replenishArea']">
        <div class="title-info">
          <el-divider content-position="left">补充说明设置</el-divider>
        </div>
        <template v-if="optionsInfo['replenishArea']">
          <el-form-item class="replenish-shown" label="补充说明显示">
            <el-switch v-model="optionsInfo.replenishShown"/>
          </el-form-item>
          <template v-if="(optionsInfo.replenishShown)">
            <el-form-item class="replenish-shown" label="补充说明内容">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="optionsInfo.replenishContent"
                        placeholder="请输入内容" size="small"/>
            </el-form-item>
          </template>
        </template>
      </template>

      <template v-if="optionsInfo['roomNumberArea']">
        <div class="title-info">
          <el-divider content-position="left">诊室号设置</el-divider>
        </div>

        <el-form-item label="序号显示">
          <el-switch v-model="optionsInfo['roomNumberShown']"/>
        </el-form-item>
        <template v-if="optionsInfo['roomNumberShown']">

          <el-form-item label="背景色">
            <el-color-picker
                size="small"
                show-alpha
                :predefine="predefineColors"
                v-model="optionsInfo['roomNumberBackground']"/>
          </el-form-item>
          <el-form-item label="自动获取接口诊室号" class="replenish-shown">
            <el-switch v-model="optionsInfo['roomNumberAuto']"/>
            <el-tooltip
                class="item"
                effect="dark"
                content="开关开启获取接口数据。开关关闭获取模板设置数据"
                placement="bottom"
            >
              <el-button>
                <i class="el-icon-warning"></i>
              </el-button>
            </el-tooltip>
          </el-form-item>
          <template v-if="true">
            <el-form-item class="replenish-shown" label="序号">
              <el-input-number
                  :disabled="optionsInfo['roomNumberAuto']"
                  :min="1"
                  :max="499"
                  size="small"
                  v-model="optionsInfo['roomNumber']"
              />
            </el-form-item>
          </template>
          <el-form-item class="replenish-shown" label="序号字号">
            <el-input-number
                :min="1"
                size="small"
                v-model="optionsInfo['roomNumberFontSize']"
            />
          </el-form-item>
        </template>
      </template>

      <template v-if="optionsInfo['businessContentArea']">
        <div class="title-info">
          <el-divider content-position="left">业务说明设置</el-divider>
        </div>
        <template v-if="optionsInfo['businessContentShown']">
          <el-form-item label="默认业务说明" class="replenish-shown">
            <el-switch v-model="optionsInfo['businessContentAuto']"/>
            <el-tooltip
                class="item"
                effect="dark"
                content="开关开启获取默认业务说明。开关关闭获取窗口的号别"
                placement="bottom"
            >
              <el-button>
                <i class="el-icon-warning"></i>
              </el-button>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="非默认业务说明字号(号别名称)" class="replenish-shown">
            <el-input-number
                :min="1"
                size="small"
                :disabled="optionsInfo['businessContentAuto']"
                v-model="optionsInfo['registerObjNameFontSize']"
            />
          </el-form-item>
          <el-form-item label="非默认业务说明字号(号别备注)" class="replenish-shown">
            <el-input-number
                :min="1"
                size="small"
                :disabled="optionsInfo['businessContentAuto']"
                v-model="optionsInfo['registerDescFontSize']"
            />
          </el-form-item>
        </template>
      </template>

      <template v-if="optionsInfo['roomNameArea']&&optionsInfo['businessContentAuto']">
        <div class="title-info">
          <el-divider content-position="left">诊室设置</el-divider>
        </div>
        <template v-if="optionsInfo['roomNameShown']">
          <el-form-item label="自动获取接口诊室名" class="replenish-shown">
            <el-switch v-model="optionsInfo['roomNameAuto']"/>
            <el-tooltip
                class="item"
                effect="dark"
                content="开关开启获取接口数据。开关关闭获取模板设置数据"
                placement="bottom"
            >
              <el-button>
                <i class="el-icon-warning"></i>
              </el-button>
            </el-tooltip>
          </el-form-item>
          <template v-if="true">
            <el-form-item class="replenish-shown" label="诊室名称">
              <el-input
                  :disabled="optionsInfo['roomNameAuto']"
                  v-model="optionsInfo['roomName']"
                  placeholder="请输入内容" size="small"/>
            </el-form-item>

            <el-form-item label="背景色">
              <el-color-picker
                  size="small"
                  show-alpha
                  :predefine="predefineColors"
                  v-model="optionsInfo['roomNameBackground']"/>
            </el-form-item>

            <el-form-item label="字体颜色">
              <el-color-picker
                  size="small"
                  show-alpha
                  :predefine="predefineColors"
                  v-model="optionsInfo['roomNameColor']"/>
            </el-form-item>

            <el-form-item label="粗细设置" class="replenish-shown">
              <el-select v-model="optionsInfo['roomNameFontWeight']" placeholder="请选择">
                <el-option v-for="item in fontWeightOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

          </template>

          <!--诊室选中字段-->
          <template v-if="optionsInfo['roomNameAuto']">
            <roomNameKeyEditor
                :designer="designer"
                :selected-widget="selectedWidget"
                :option-model="optionModel"
            />
          </template>

          <template v-if="true">
            <el-form-item label="优先显示" class="replenish-shown">
              <el-switch v-model="optionsInfo['priorInfo']"/>
            </el-form-item>
            <el-form-item class="replenish-shown" label="优先名称">
              <el-input :disabled="!optionsInfo['priorInfo']" v-model="optionsInfo['priorName']"
                        placeholder="请输入内容"
                        size="small"/>
            </el-form-item>
          </template>

          <el-form-item class="replenish-shown" label="诊室名称字体">
            <el-input-number
                :min="1"
                size="small"
                v-model="optionsInfo['roomNameFontSize']"
            />
          </el-form-item>
        </template>
      </template>

      <template v-if="optionsInfo['layerArea']">
        <div class="list-item-setting">
          <div class="title-info">
            <el-divider content-position="left">弹层信息</el-divider>
          </div>
          <el-select v-model="optionsInfo['layerNameKey']" placeholder="请选择" size="medium">
            <el-option
                v-for="item in layerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>

      </template>
    </div>
  </div>
</template>

<script>
import roomNameKeyEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/roomNameKey-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "windowConfig-roomName-roomNo-editor",
  components: {roomNameKeyEditor},
  componentName: "windowConfig-roomName-roomNo-editor",
  mixins: [],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ['serverFieldList', 'getDesignerConfig'],
  data() {
    return {
      optionsInfo: Object(),
      predefineColors: types['predefineColors'],
      fontWeightOptions: types['fontWeightOptions'],
      layerOptions: [
        {
          value: 'call-patient',
          label: '通用弹层'
        },
        {
          value: 'call-patient-original-biz',
          label: '业务弹层'
        }
      ],
    }
  },

  computed: {},

  methods: {},

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
        if (!Reflect.has(this.optionsInfo, 'deptName')) {
          Reflect.set(this.optionsInfo, 'deptName', '采血处')
        }
        if (!Reflect.has(this.optionsInfo, 'deptNameAuto')) {
          Reflect.set(this.optionsInfo, 'deptNameAuto', true)
        }
      },
      deep: true,
      immediate: true
    }
  }

}
</script>


<style lang="scss" scoped>
.replenish-shown {
  display: flex;
  flex-direction: column;

  :deep(label) {
    width: 100% !important;
  }

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
    display: flex;
    flex-direction: row;
    flex-grow: 1;

    .el-input-number {
      flex-shrink: 1;
      width: 150px;
    }

    .el-button {
      color: #e58602;
      font-size: 18px;
      flex-shrink: 0;
      padding: 0 15px;
      border-color: transparent !important;
      background: transparent !important;
    }
  }
}
</style>